@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,img,hr{margin:0;padding:0;vertical-align:baseline;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,th,td,var,i{font-style:normal;font-weight:normal;}
ol,ul,li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}legend{color:#000;}button{background:none;border:none;}ins{text-decoration:none;}blockquote:before,blockquote:after,q:before, q:after{content:"";}blockquote,q{quotes:"" "";}
hr{color:#f5f2ee;background-color:#f5f2ee;border:none;height:1px;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
table {border-collapse: collapse;border-spacing: 0;}
/* commom */
html,body{-webkit-text-size-adjust:none;position: relative;height: 100%;}
body {font-size: 14px;font-family: "PingFang SC", "Lantinghei SC", "Microsoft Yahei", "Hiragino Sans GB", "Microsoft Sans Serif", "WenQuanYi Micro Hei", sans-serif;-webkit-font-smoothing: antialiased;}
button,a{cursor:pointer;}
input,button{outline:none;}
p{word-wrap:break-word;}
a{color:#333;text-decoration:none;transition:all .15s ease-out;}
a:hover{color:#f60;text-decoration:none;}
i{overflow:hidden;}
.clearfix:after,.d-mininav-box dl:after,.fn-clear:after{clear:both;content:".";display:block;height:0;visibility:hidden;}
.f14{font-size:14px;}.f16{font-size:16px;}.f18{font-size:18px;}
.cp{cursor:pointer;}.b{font-weight:700;}.w{white-space:nowrap;}.tal{text-align:left;}.tac{text-align:center;}
.tar{text-align:right;}.fr,.fn-right,.ikf-fr{float:right;}.db img{display:block;}
.fl,.fn-left,.ikf-fl{float:left;}.pr{position:relative;}.pa{position:absolute;}.oh{overflow:hidden;}.hide{display:none;}
::-moz-selection{background: #f60; color: #fff; text-shadow: none;}
::selection {background: #f60; color: #fff; text-shadow: none;}
::-webkit-input-placeholder{color:#666;}
::-moz-placeholder{color:#666;}
:-moz-placeholder{color:#666;}
::-ms-input-placeholder{color:#666;}
input:-moz-placeholder { color:#666; }
textarea:-moz-placeholder {color:#666;}

@font-face {
  font-family: 'iconfont';  /* project id 16475 */
  src: url('https://at.alicdn.com/t/font_pz2tiqfku5e45cdi.eot');
  src: url('https://at.alicdn.com/t/font_pz2tiqfku5e45cdi.eot?#iefix') format('embedded-opentype'),
  url('https://at.alicdn.com/t/font_pz2tiqfku5e45cdi.woff') format('woff'),
  url('https://at.alicdn.com/t/font_pz2tiqfku5e45cdi.ttf') format('truetype'),
  url('https://at.alicdn.com/t/font_pz2tiqfku5e45cdi.svg#iconfont') format('svg');
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
}

/* 滚动条 */
html,.ikf-week .weekcon{
    &::-webkit-scrollbar{
        width: 7px;
        height: 7px
    }
    &::-webkit-scrollbar-thumb{
        border-radius: 1em;
        background-color: rgba(50,50,50,0.3)
    }
    &::-webkit-scrollbar-track{
        box-shadow: inset 0 0 6px rgba(0,0,0,0.3)
    }
    &::-webkit-scrollbar-thumb{
        background: rgba(100,100,100,0.8)
    }
    &::-webkit-scrollbar-corner,&::-webkit-scrollbar-thumb:window-inactive{
        background: rgba(100,100,100,0.4)
    }
}

.wp{width: 1200px;margin: auto;}

.mt20{margin-top: 20px;}
.mt30{margin-top: 30px;}

.site_slider{position: relative;height:580px; transform: translateZ(0);}
.slider_inner{position: absolute;width: 100%;height: 100%;transition: transform 1.8s ease;transform: translateZ(0) scale(1);overflow:hidden;
    a{position: absolute;width: 100%;height: 100%;background-position: center 0;background-repeat: no-repeat;transition: opacity .3s ease;opacity: 0;z-index: 0;
        &.in{opacity: 1;z-index: 1;}
    }
}
.slider_nav{position: absolute;z-index: 1;top: 114px;right: 50%;margin-right: -590px;width: 240px;height: 352px;padding-top: 70px;background: rgba(255,255,255,.7);background: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,.7) 17%,rgba(255,255,255,.8) 50%,rgba(255,255,255,.7) 88%,rgba(255,255,255,0) 100%);
    a{display: block;height: 54px;padding: 0 15px;margin: -24px 0;cursor: pointer;color: #202020;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
        &.current{ background-color: rgba(255,255,255,.8);padding: 10px 15px 12px;margin: 0 0 24px;}
        &:first-child{margin-top: -24px!important;}
    }
}

.ikf-{
    &drop{
        position: absolute;
        top: 50px;
        background: #fff;
        border-radius: 5px;
        border-top: 2px solid #f60;
        box-shadow: 0 0 20px rgba(0, 0, 0, .2);
        transform: translateY(-40px);
        backface-visibility:hidden;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s 0s, visibility 0s 0.3s, transform .3s;
        z-index: 99;
        &.is-visible {
            opacity: 1;
            backface-visibility:visible;
            visibility: visible;
            transition: opacity 0.3s 0s, visibility 0s 0s, transform .3s;
            transform: translateY(0);
        }
        &:after,&:before{content: '';position: absolute;}
        &:after{top: -5px;border-bottom: #fff 5px solid;border-left: transparent 5px solid;border-right: transparent 5px solid;}
        &:before{top: -7px;border-bottom: #f60 7px solid;border-left: transparent 7px solid;border-right: transparent 7px solid;}
    }
    &header{position: absolute;top: 0;left: 0;right: 0;height: 48px;z-index: 1;color: #fff;text-shadow: 0 1px 1px rgba(0, 0, 0, .5);transition: background .3s;
        a{color: #fff;
            &:hover{padding-bottom: 5px;border-bottom: 1px solid #fff;}
        }
        #ikanfan{float: left;margin: 11px 20px 0 0;width: 100px;height: 26px;background: url(../img/logo_white.png) no-repeat;background-size: 100px 26px;}
        nav{display: inline-block;margin-top: 14px;
            a{margin-right: 20px;}
        }
        .mod-quick{margin-top: 5px;position: relative;
            .quick-history,.quick-new,.quick-fan{margin-right: 10px;text-align: center;font-size: 12px;
                a{
                    i{font-size: 18px;}
                    em{display: block;}
                    &:hover{color: #fff;}
                }
            }
            .quick-history{
                .ikf-drop{width: 300px;height: 300px;right: 0;
                    &:after{right: 50px;}
                    &:before{right: 48px;}
                }
            }
            .quick-user{margin-top: 3px;
                img{width: 32px;height:32px;border-radius: 50%;}
            }
        }
        .search{padding-top: 8px;position: relative;overflow: hidden;padding-right: 20px;margin-right: 20px;
            input{padding: 5px 10px;box-sizing: border-box;width: 100%;height: 32px;line-height: 32px;background: rgba(0,0,0,.15);border: 1px solid rgba(255,255,255,.8);color: #fff;border-radius: 3px;}
            button{position: absolute;right: 15px;top: 9px;width: 40px;height: 30px;line-height: 30px;text-align: center;color: #fff;
                i{font-size: 24px;}
            }
        }
        &.fix{position: fixed;background: #fff;box-shadow: 0 0 4px rgba(0, 0, 0, .2);text-shadow: none;color: #444;z-index: 999;
            a{color: #444;
                &:hover{border-bottom: none;color: #f60;padding-bottom: 0;}
            }
            .mod_quick{
                .quick-history,.quick-new,.quick-fan{
                    a{color: #444;
                        &:hover{color: #f60;}
                    }
                }
            }
            .search{
                input{border: 1px solid #d9d9d9;background: #fff;color: #444;}
                button{color: #444;}
            }
            #ikanfan{background-image: url(../img/logo.png);}
        }
    }
    &left{width: 830px;}
    &right{width: 350px;
        .ikf-title{
            .tab{float: right;}
        }
    }
    &title{
        h2{float: left;font-size: 16px;color: #444;}
        .icon{display: inline-block;position: relative;top: -5px;width: 40px; height: 40px;vertical-align: middle;fill: currentColor;overflow: hidden;}
        a{float: right;margin-top: 3px;height: 28px;line-height: 28px;border: 1px solid #f60;border-radius: 5px;text-align: center;padding: 0 5px 0 15px;color: #f60;
            &:hover{background: #f60;color: #fff;}
        }
        .tab{float: left;margin-top: 5px;margin-left: 30px;border: 1px solid #e5e9ef;height: 26px;line-height: 26px;border-radius: 15px;
            li{float: left;padding: 0 10px;text-align: center;color: #666;cursor: pointer;border-radius: 13px;
                em{font-size: 12px;margin-left: 5px;color: #ccc;}
                &.cur{background: #f60;color: #fff;
                    em{color: #f90;}
                }
            }
        }
    }
    &week{
        .weekcon{height: 388px;overflow-x: hidden;overflow-y: auto;margin-top: 15px;margin-bottom: -20px;
            ul{display: none;
                li{position: relative;width: 33.33333%;float: left;margin-bottom: 20px;
                    div{float: left;position: relative;margin-right: 10px;width: 77px;height: 77px;border-radius: 4px;overflow: hidden;box-shadow: 0 3px 14px 0 hsla(23,13%,76%,.4);z-index: 2;
                        img{position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;overflow: auto;display: block;width: 77px;}
                    }
                    h4{font-size: 12px;color: #444;margin-right: 50px;}
                    p{position: absolute;left: 87px;right: 0;bottom: 0;height: 20px;line-height: 20px;font-size: 12px;color: #999;
                        em{margin-left: 5px;display: inline-block;background-color: #eee;border-radius: 10px;padding: 0 10px;
                            &.today{background-color: #f60;color: #fff;}
                        }
                    }
                }
            }
        }
        .d-hotlist {
            padding: 2px 0;
            background-color: #fff;
            border: 1px solid #dee2e5;
            border-radius: 4px;
            font-size: 12px;
            margin-top: 10px;
            display: none;
        }

        .d-hotlist li {
            padding: 13px 15px;
            border-top: 1px solid #fff;
            border-bottom: 1px solid #fff;
            cursor: pointer
        }

        .d-hotlist li.active {
            padding-top: 14px;
            padding-bottom: 14px;
            border-color: #dee2e5
        }

        .d-hotlist li.active:hover {
            background-color: #fafafa
        }

        .d-hotlist li.active:first-child {
            border-top-color: #fff
        }

        .d-hotlist li.active:last-child {
            border-bottom-color: #fff
        }

        .d-hotlist li em {
            display: inline-block;
            width: 25px;
            height: 25px;
            font: 700 14px/25px Arial Black;
            color: #999;
            text-align: center;
            background-color: #eee;
            border: 1px solid #dee2e5;
            border-radius: 50%
        }

        .d-hotlist li:first-child em {
            color: #fff;
            background-color: #ff2853;
            border-color: #de0f38
        }

        .d-hotlist li:nth-child(2) em {
            color: #fff;
            background-color: #ff9936;
            border-color: #ff8a21
        }

        .d-hotlist li:nth-child(3) em {
            color: #fff;
            background-color: #43b8f5;
            border-color: #3aade9
        }

        .d-hotlist li .d-vodname {
            margin-left: 10px;
            max-width: 145px;
            font-size: 14px;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

        .d-hotlist li .d-views {
            min-width: 80px;
            height: 25px;
            line-height: 25px;
            color: #999;
            text-align: right;
        }

        .d-hotlist li .d-media {
            position: relative;
            display: none;
            height: 112px
        }

        .d-hotlist li .d-media em {
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 30px;
            line-height: 30px
        }

        .d-hotlist li .d-media>a {
            float: left;
            margin-right: 10px;
            width: 80px;
            height: 112px;
            overflow: hidden;
            border-radius: 5px;
            -webkit-mask-image: -webkit-radial-gradient(circle,#fff,#000)
        }

        .d-hotlist li .d-media>a img {
            width: 80px;
            height: 112px;
            border-radius: 3px;
            -webkit-transition: -webkit-transform .5s ease-out;
            transition: -webkit-transform .5s ease-out;
            transition: transform .5s ease-out;
            transition: transform .5s ease-out,-webkit-transform .5s ease-out
        }

        .d-hotlist li .d-media>a img:hover {
            -webkit-transform: scale(1.1);
            transform: scale(1.1)
        }

        .d-hotlist li .d-media h3 {
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 0;
            height: 30px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis
        }

        .d-hotlist li .d-media p {
            color: #999
        }

        .d-hotlist li .d-media p.d-desc {
            margin-top: 15px
        }
    }
    &main{
        .animelist{margin-top: 15px;width: 1240px;overflow: hidden; margin-left: -15px;
            ul{display: none;
                li{float: left;position: relative;margin-left: 15px;margin-top: 15px;width: 226px;background-color: #fff;box-shadow: 0 3px 14px 0 hsla(23,13%,76%,.4);z-index: 2;padding-bottom: 10px;border-radius: 4px;overflow: hidden;
                    div{position: relative;width: 226px;height: 310px;overflow: hidden;
                        img{position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;overflow: auto;display: block;width: 226px;display: block;}
                    }
                    h4{padding: 10px 15px 0;color: #666;}
                    p{padding: 5px 15px;color: #999;font-size: 12px;}
                }
            }
        }
    }
    &news{
        .ikf-title{
            .tab{border: none;line-height: normal;margin-top: 8px;
                li{background-color: #f5f5f5;color: #999;padding: 3px 6px;border-radius: 4px;height: auto;margin-left: 5px;font-size: 12px;
                    &:hover{background-color: #ddd;color: #666;}
                }
            }
        }
        .newslist{width: 850px;
            &:after{clear:both;content:".";display:block;height:0;visibility:hidden;}
            li{position: relative;float: left;margin-top: 10px;width: 200px;margin-right: 10px;
                &:after{clear:both;content:".";display:block;height:0;visibility:hidden;}
                .picbox{position: relative;width: 200px;height: 112px;overflow: hidden;}
                a{
                    &.pic{display: block;width: 200px;height: 112px;
                        img{width: 200px;}
                    }
                    &.type{position: absolute;right: 5px;bottom: 5px;padding: 3px 12px;background:rgba(0,0,0,.7);font-size: 12px;color: #fff;border-radius: 3px;}
                }
                h2{margin-bottom: 5px;margin-top: 10px;color: #333;height: 40px;line-height: 20px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical}
            }
        }
        .newstxt{
            li{margin-top: 15px;height: 20px;line-height: 20px;overflow: hidden;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
                a{
                    &.type{display: inline-block;margin-right: 10px;width: 38px;height: 18px;line-height:18px;text-align: center;border-radius: 3px;font-size: 14px;}
                    &.type-214 {
                        border: 1px #38a4eb solid;
                        color: #38a4eb
                    }
                    &.type-215 {
                        border: 1px #ff8aae solid;
                        color: #ff8aae
                    }
                    &.type-216 {
                        border: 1px #4f748d solid;
                        color: #4f748d
                    }
                    &.type-217 {
                        border: 1px #ffa200 solid;
                        color: #ffa200
                    }
                    &.type-218 {
                        border: 1px #ff4949 solid;
                        color: #ff4949
                    }
                    &.type-219 {
                        border: 1px #66a01a solid;
                        color: #66a01a
                    }
                    &.type-220 {
                        border: 1px #ff7fef solid;
                        color: #ff7fef
                    }
                }
            }
        }
        .ikf-right{
            .ikf-title{
                .tab{margin-left: 0;}
            }
        }
    }
}
